import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    // 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
      path: 'dashboard',
      name: 'Dashboard',
      // meta: {title: '首页菜单', icon: 'el-icon-first-aid-kit'},

      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'el-icon-position' ,affix:true} // affix 是否粘在tag栏那里
      // meta: { title: 'Dashboard', icon: 'dashboard' }
    }
        /*  {
        path: 'forms',
        name: 'Forms',
        component: () => import('@/views/form/index'),
        meta: { title: '普通表单', icon: 'el-icon-crop' }
        // meta: { title: 'Form', icon: 'form' }
      },
      {
        path: 'forms2',
        name: 'Forms2',
        component: () => import('@/views/form/form.vue'),
        meta: { title: '加工表单', icon: 'el-icon-crop' /!*hidden:true,activeMenu:"/form/forms"*!/}  //这种可以当做详情页使用，不会再侧面栏展开
        // meta: { title: 'Form', icon: 'form' }
      },*/
    ]
  },

  /* 路由名称 各级不要有 重复的path  */
  {
    path: '/form',
    component: Layout,
    redirect: '/form/forms',
    meta: {title: 'form表单', icon: 'el-icon-first-aid-kit'},
    children: [
      {
        path: 'forms',
        name: 'Forms',
        component: () => import('@/views/form/index'),
        meta: { title: '普通表单', icon: 'el-icon-crop' }
        // meta: { title: 'Form', icon: 'form' }
      },
      {
        path: 'forms2',
        name: 'Forms2',
        component: () => import('@/views/form/form.vue'),
        meta: { title: '加工表单', icon: 'el-icon-crop' /*hidden:true,activeMenu:"/form/forms"*/}  //这种可以当做详情页使用，不会再侧面栏展开
        // meta: { title: 'Form', icon: 'form' }
      },
    ]
  },

  /* 路由名称 各级不要有 重复的path  */
  {
    path: '/pluginAndDirective',
    component: Layout,
    redirect: '/pluginAndDirective/directive',
    meta: {title: '插件与指令', icon: 'el-icon-first-aid-kit'},
    children: [
      {
        path: 'plugin',
        name: 'Plugin',
        component: () => import('@/views/pluginAndDirective/plugin.vue'),
        meta: { title: '插件', icon: 'el-icon-crop' }
      },
      {
        path: 'directive',
        name: 'Directive',
        component: () => import('@/views/pluginAndDirective/directive.vue'),
        meta: { title: '指令', icon: 'el-icon-crop' }
      },
    ]
  },

  {
    path: '/elementPro',
    component: Layout,
    redirect: '/elementPro/simpleForm',
    alwaysShow: true,
    meta: {title: 'elementPro', icon: 'el-icon-first-aid-kit'},
    children: [
      {
        path: 'simpleForm',
        name: 'simpleForm',
        component: () => import('@/views/elementPro/simpleForm'),
        meta: { title: 'simpleForm表单', icon: 'el-icon-crop' }
      },
      {
        path: 'Tform',
        name: 'Tform',
        component: () => import('@/views/elementPro/Tform.vue'),
        meta: { title: 'Tform表单', icon: 'el-icon-crop' }
      },
      {
        path: 'QueryForm',
        name: 'QueryForm',
        component: () => import('@/views/elementPro/QueryForm.vue'),
        meta: { title: 'QueryForm表单', icon: 'el-icon-crop' }
      },
      {
        path: 'datePicker',
        name: 'datePicker',
        component: () => import('@/views/elementPro/datePicker.vue'),
        meta: { title: '日期控件', icon: 'el-icon-crop' }
      },
      {
        path: 'dialog',
        name: 'dialog',
        component: () => import('@/views/elementPro/dialog.vue'),
        meta: { title: 'dialog对话框', icon: 'el-icon-crop' }
      },
      {
        path: 'selectPagination',
        name: 'selectPagination',
        component: () => import('@/views/elementPro/selectPagination.vue'),
        meta: { title: 'selectPagination', icon: 'el-icon-crop' }
      },
      {
        path: 'selectPaginationTable',
        name: 'selectPaginationTable',
        component: () => import('@/views/elementPro/selectPaginationTable.vue'),
        meta: { title: 'selectPaginationTable', icon: 'el-icon-crop' }
      },
      {
        path: 'table1',
        name: 'table1',
        component: () => import('@/views/elementPro/table/table1.vue'),
        meta: { title: 'table可用版', icon: 'el-icon-crop' }
      },
      {
        path: 'table2',
        name: 'table2',
        component: () => import('@/views/elementPro/table/table2.vue'),
        meta: { title: 'table可输入', icon: 'el-icon-crop' }
      },
      {
        path: 'table3',
        name: 'table3',
        component: () => import('@/views/elementPro/table/table3.vue'),
        meta: { title: 'table编辑切换', icon: 'el-icon-crop' }
      },
      {
        path: 'table4',
        name: 'table4',
        component: () => import('@/views/elementPro/table/table4.vue'),
        meta: { title: 'table整行编辑', icon: 'el-icon-crop' }
      },
      {
        path: 'table5',
        name: 'table5',
        component: () => import('@/views/elementPro/table/table5.vue'),
        meta: { title: 'table树形', icon: 'el-icon-crop' }
      },
      {
        path: 'table6',
        name: 'table6',
        component: () => import('@/views/elementPro/table/table6.vue'),
        meta: { title: 'table最终版', icon: 'el-icon-crop' }
      },
    ]
  },
  {
    path: '/djdy',
    component: Layout,
    name:'Djdy',
    children: [
      {
        path: 'djdys',
        name: 'Djdys',
        component: () => import('@/views/routerContion1/index'),
        meta: { title: '单级单页', icon: 'el-icon-alarm-clock' ,roles: ['admin','editor'] }
        // meta: { title: '单级单页', icon: 'zip' ,roles: ['admin','editor'] }
      }
    ]
  },


  {
    path: '/vuejsx',
    component: Layout,
    children: [
      {
        path: 'vuejsxs',
        name: 'vuejsxs',
        component: () => import('@/views/vueJsx/index'),
        meta: { title: 'vuejsx', icon: 'el-icon-medal' }
        // meta: { title: 'vuejsx', icon: 'form' }
      }
    ]
  },

  //二级单页面
  {
    path: '/erjidanye',
    component: Layout,
    redirect: '/erjidanye/menu111',
    name: 'Erjidanye',
    //只需要加上这个alwaysShow
    alwaysShow: true,
    meta: {title: '二级单页(map)', icon: 'el-icon-first-aid-kit'},
    // meta: {title: '二级单页', icon: 'nested'},
    children: [
      {
        path: 'menu111',
        //这里面多加了一层router-view
        component: () => import('@/views/routerContion3/menu/Menu'), // Parent router-view
        name: 'Menu111',
        meta: {title: '地图', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'leidatu',
        //这里面多加了一层router-view
        component: () => import('@/views/routerContion3/menu/leidatu'), // Parent router-view
        name: 'leidatu',
        meta: {title: '雷达图', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'bt',
        //这里面多加了一层router-view
        component: () => import('@/views/routerContion3/menu/bingtu'), // Parent router-view
        name: 'bt',
        meta: {title: '饼图', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      }

    ]
  },
      /*
        2: 2级路由多页面
        meta里面的参数
        noCache如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
        breadcrumb如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
        title会被渲染到左侧和顶部导航栏*/

  {
    path: '/example',
    component: Layout,
    redirect: '/example/tree',
    name: 'Example',
    meta: { title: 'Example', icon: 'el-icon-s-help' , roles: ['editor']  },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/table.vue'),
        meta: { title: 'Table', icon: 'el-icon-first-aid-kit'  , roles: ['editor']  }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/table/tree.vue'),
        meta: { title: 'form表单验证测试', icon: 'el-icon-basketball'   ,roles: ['editor']  }
      },
      {
        path: 'elsearchtablepagination',
        name: 'elsearchtablepagination',
        component: () => import('@/views/table/elsearchtablepagination.vue'),
        meta: { title: 'table插件的使用', icon: 'el-icon-basketball'   ,roles: ['editor']  }
      },
      {
        path: 'TablePaginationPage',
        name: 'TablePaginationPage',
        component: () => import('@/views/table/TablePaginationPage.vue'),
        meta: { title: '写一个table', icon: 'el-icon-basketball'   ,roles: ['editor']  }
      },
      {
        path: 'elformtablepagination',
        name: 'elformtablepagination',
        component: () => import('@/views/table/elformtablepagination.vue'),
        meta: { title: '写一个tablePagination', icon: 'el-icon-basketball'   ,roles: ['editor']  }
      },
      {
        path: 'searchformtablepaginationtest',
        name: 'searchformtablepaginationtest',
        component: () => import('@/views/table/searchformtablepaginationtest.vue'),
        meta: { title: '最终测试', icon: 'el-icon-basketball'   ,roles: ['editor']  }
      },
      {
        path: 'treeTable',
        name: 'treeTable',
        component: () => import('@/views/table/treeTable.vue'),
        meta: { title: 'treeTable测试', icon: 'el-icon-basketball'   ,roles: ['editor']  }
      },
    ]
  } ,




  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1/menu1-1',
    name: 'Nested',
    alwaysShow: true,
    meta: {title: '多级路由', icon: 'el-icon-s-shop'},
    children: [
      {
        path: 'menu1',
        //三级路由多了一个router-view ★★★★★
        //原则上有多少级路由嵌套就需要多少个<router-view>
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        redirect: '/nested/menu1/menu1-1',
        meta: { title: 'Menu1' ,icon: 'el-icon-s-shop'},
        alwaysShow: true,
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1/index'),
            name: 'Menu1-1',
            meta: { title: 'Menu1-1' ,icon: 'el-icon-s-shop'}
          },
          {
            path: 'menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2/index'),
            name: 'Menu1-2',
            meta: { title: 'Menu1-2' ,icon: 'el-icon-s-shop'},
            //四级路由 也会有个router-view
            alwaysShow:true,

            redirect: '/nested/menu1/menu1-2/menu1-2-1',
            children:[
              {
                path: 'menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index'),
                name: 'Menu1-2-1',
                meta: { title: 'Menu1-2-1' ,icon: 'el-icon-s-shop'}
              },
              {
                path: 'menu1-2-2',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index'),
                name: 'Menu1-2-2',
                meta: { title: 'Menu1-2-2' ,icon: 'el-icon-s-shop'},

              }
            ]

          },
          {
            path: 'menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3/index'),
            name: 'Menu1-3',
            meta: { title: 'Menu1-3' ,icon: 'el-icon-s-shop'}
          }
        ]
      },

      {
        path: 'menu2',
        component: () => import('@/views/nested/menu2/index'),
        name: 'Menu2',
        meta: { title: 'menu2' ,icon: 'el-icon-warning-outline'}
      }
    ]
  },

  //html&&css
/*  {
    path: '/css',
    component: Layout,
    redirect: '/css/animation',
    name: 'Css',
    meta: { title: 'Css部分', icon: 'el-icon-s-help' },
    alwaysShow:true,
    children: [
      {
        path: 'animation',
        name: 'Animation',

        component: () => import('@/views/CssPartial/views/Animation'),
        meta: { title: 'animation动画', icon: 'el-icon-s-data' }
      }
    ]
  } ,*/


  //javascript基础+高级部分+es部分
  {
    path: '/jsElementary',
    component: Layout,
    //多级路由需要重定向
    redirect: '/jsElementary/senior',
    name: 'JsElementary',
    meta: { title: 'JavaScript基础', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'senior',
        name: 'Senior',
        component: () => import('@/views/JavaScript/JsSenior'),
        meta: { title: 'javaScript高级', icon: 'el-icon-suitcase' }
      },
      {
        path: 'es6',
        name: 'ES6',
        component: () => import('@/views/JavaScript/ES6'),
        meta: { title: 'ECMAScript基础', icon: 'el-icon-collection' }
      },
      {
        path: 'promise',
        name: 'Promise',
        component: () => import('@/views/JavaScript/Promise'),
        meta: { title: 'Promise相关', icon: 'el-icon-collection' }
      }
    ]
  },

  //vue基础部分
  {
    path: '/vue',
    component: Layout,
    //多级路由需要重定向
    redirect: '/vue/vueEle',
    name: 'Vue',
    meta: { title: 'Vue框架部分', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'vueEle',
        name: 'VueEle',
        component: () => import('@/views/vue/views/VueEle'),
        meta: { title: 'vue基础部分', icon: 'el-icon-bell' }
      },
      {
        path: 'vueLife',
        name: 'VueLife',
        component: () => import('@/views/vue/views/VueLife'),
        meta: { title: 'vue生命周期(重点)', icon: 'el-icon-suitcase' },
        beforeEnter: (to, from, next) => {
          console.log("beforeEnter") // 在beforeRouteEnter 之前执行 beforeEach 之后执行
          next()  //放行
        },
      /*  beforeLeave: (to, from, next) => { // 没有触发 不清楚原因
          console.log("beforeLeave")
          next()  //放行
        }*/
      },
      {
        path: 'compConnection',
        name: 'CompConnection',
        component: () => import('@/views/vue/views/CompConnection'),
        meta: { title: 'vue组件通信', icon: 'el-icon-s-tools' }
      },
      {
        path: 'slotApply',
        name: 'SlotApply',
        component: () => import('@/views/vue/views/SlotApply'),
        meta: { title: 'vue插槽', icon: 'el-icon-s-opportunity' }
      },
      {
        path: 'vueRouter',
        name: 'VueRouter',
        component: () => import('@/views/vue/views/VueRouter'),
        meta: { title: 'vue路由', icon: 'el-icon-success' }
      },
      {
        path: 'vuex',
        name: 'Vuex',
        component: () => import('@/views/vue/views/Vuex'),
        meta: { title: 'vue状态管理', icon: 'el-icon-warning-outline' }
      }

    ]
  },

  //小的案例
  {
    path: '/case',
    component: Layout,
    redirect: '/case/case1',
    name: 'case1',
    //只需要加上这个alwaysShow
    alwaysShow: true,
    meta: {title: '小案例', icon: 'el-icon-first-aid-kit'},
    // meta: {title: '二级单页', icon: 'nested'},
    children: [
      {
        path: 'vlist',
        //这里面多加了一层router-view
        component: () => import('@/views/case/vlist'), // Parent router-view
        name: 'Vlist',
        meta: {title: '虚拟滚动', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'case1',
        //这里面多加了一层router-view
        component: () => import('@/views/case/index'), // Parent router-view
        name: 'Menu111',
        meta: {title: 'tab滚动', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'case2',
        //这里面多加了一层router-view
        component: () => import('@/views/case/canvas.vue'), // Parent router-view
        name: 'Case2',
        meta: {title: 'canvas重绘页面', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'case3',
        //这里面多加了一层router-view
        component: () => import('@/views/case/filePreview.vue'), // Parent router-view
        name: 'Case3',
        meta: {title: '文件预览', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'vuePdf',
        //这里面多加了一层router-view
        component: () => import('@/views/case/filePreviewPdf.vue'), // Parent router-view
        name: 'VuePdf',
        meta: {title: 'VuePdf', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      },
      {
        path: 'veltable',
        //这里面多加了一层router-view
        component: () => import('@/views/case/veltable.vue'), // Parent router-view
        name: 'veltable',
        meta: {title: 'veltable', icon: 'el-icon-first-aid-kit'}
        // meta: {title: '二级单页', icon: 'nested'}
      }

    ]
  },

  {
    path: '/fwb',
    meta: {title: '富文本', icon: 'el-icon-first-aid-kit'},
    redirect: '/fwb/wangeditor',
    component: Layout,
    name:'wangeditor',
    children: [
      {
        path: 'wangeditor',
        name: 'wangeditor',
        component: () => import('@/views/wangeditor/index'),
        meta: { title: 'wangeditor', icon: 'el-icon-alarm-clock' ,roles: ['admin','editor'] }
        // meta: { title: '单级单页', icon: 'zip' ,roles: ['admin','editor'] }
      },
      {
        path: 'tinymce',
        name: 'tinymce',
        component: () => import('@/views/tinymce/index'),
        meta: { title: 'tinymce', icon: 'el-icon-alarm-clock' ,roles: ['admin','editor'] }
        // meta: { title: '单级单页', icon: 'zip' ,roles: ['admin','editor'] }
      }
    ]
  },

  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: 'External Link', icon: 'form' }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

function createRouter() {
  return new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }), // 页面跳转时的y轴移动的距离
    routes: constantRoutes
  })
}

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher //路由重置
}

export default router
